<style type="text/css">
.van-radio{
  margin: .6rem;
}
.van-radio__label{
  display: inline;
  font-size: .2rem
}
.van-radio .van-icon-checked{
  color: #2d8cf0;
}
.van-radio__input{
  height: 21px
}
/*
*进度条
*/
.ivu-progress-inner{
  padding: .1rem
}
.ivu-progress-text-inner{
  color: #2d8cf0;
}
.ivu-btn{
  border-radius: 50px;
}
</style>
<template>
  <Row>
    <h1 style="text-align: center; margin: .5rem">{{ answer.title }}</h1>
    <div style=" text-align: center;margin: .5rem">
      <Progress :percent="progress">
        <span>完成</span>
      </Progress>
    </div>
    <Divider />
    <Form ref="formValidate">
    <!-- 题目 -->
    <div style="margin: .5rem; font-size: .3rem; font-weight: bold">
      {{ num + 1 }}.{{ list.title }}
    </div>      
    <!-- 选项 -->
    <FormItem prop="radio">
<!--       <yd-radio-group v-model="field[num]">
        <yd-radio :val="key" v-for="(option, key) in list.option" :key="key">{{ option.textVal }}</yd-radio>
      </yd-radio-group> -->
      <van-radio-group v-model="field[num]">
        <van-radio :name="key" v-for="(option, key) in list.option" :key="key">{{ option.textVal }}</van-radio>
      </van-radio-group>
    </FormItem>
    <Divider />
    </Form>
    <!--  提交按钮 -->
    <div style="margin: 20px auto; text-align: center">
      <div v-if="num + 1 === length">
        <!-- <Button type="primary" @click="getAnswer('dec')">上一题</Button> -->
        <Button type="primary" @click="jump">完成答题</Button>
      </div>
      <div v-else>
          <!-- <Button v-if="num > 0" type="primary" @click="getAnswer('dec')">上一题</Button> -->
          <Button type="primary" @click="getAnswer('inc')">下一题</Button>
      </div>
    </div>
  </Row>
</template>

<script>
import util from "@/libs/util";

export default {
  name: 'MAnswer',
  data() {
    return {
      answer: {},
      fields: {},
      length: 0,
      querys: {},
      field: {},
      list: [],
      num: 0,
      progress: 0
    };
  },
  methods: {
    init() {
      util.ajax.get('/index/read', { params: { survey_no: this.querys.survey_no } })
      .then(response => {
        if (response.code === 200) {
          this.answer = response.data
          this.fields = response.data.survey_fields
          this.length = response.data.survey_fields.length
          this.getAnswer()
        }
      })
    },
    getAnswer (tag) {
      if (tag === 'dec') {
        // this.num = this.num - 1
      }else if (tag === 'inc') {
        if (this.field[this.num] === undefined) {
          this.$Notice.error({
            title: '请选择答案'
          })
          return false
        }
        this.num += 1
      }else{
        this.num = 0
      }
      this.list = this.fields[this.num]
      this.progress = parseInt((this.num + 1) / this.length * 100)
    },
    jump () {
      let field = this.field
      let answer = this.answer
      let params = []
      for (let index in field) {
        let selOptIndex = field[index]
        let selOptItem = answer.survey_fields[index]
        if (selOptItem.q_type === 'radio') {
          params.push({
          uuid: selOptItem.unique_id,
          title:selOptItem.title,
          selOption: selOptIndex,
          selOptionText: selOptItem.option[selOptIndex].textVal
        })
        } else if (selOptItem.q_type === 'checkbox') {
          console.log('checkbox')
        } else {
          console.log('textarea')
        }
      }

      util.ajax.post('/index/doAnswer', { survey_no: this.querys.survey_no, uid: 16, survey_fields: JSON.stringify( params ) })
      .then(response => {
        if (response.code === 200) {
          this.$router.push({
            name: 'MScore',
            query: { id: response.data }
          })
        } else {
          this.$Notice.error({
              title: response.msg
          })
        }
      })
    }
  },
  mounted() {
    this.querys = this.$route.query
    this.init()
  }
}
</script>
